<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>格式化多看阅读笔记</title>
</head>
<body>
<h3>多看阅读数据：</h3>
<textarea id="duokanNote" style="width: 100%;height: 100px;"></textarea>
<h3>配置项：</h3>
<p>书名：<input type="text" id="bookName" value=""/>&nbsp;&nbsp;作者：<input type="text" id="author" value="font-size: 15px;"/></p>
<p>章节：<input type="text" id="chapter" value="margin-top:20px;"/>&nbsp;&nbsp;日期：<input type="text" id="date" value="color:blue;"/></p>
<p>笔记：<input type="text" id="note" value=""/></p>
<input id="format" type="button" value="格式化数据" />  <br><br>

<h3>格式化后数据：</h3>
<textarea id="formatted" style="width: 100%;height: 100px;"></textarea>

<h3>格式化后效果：</h3>
<hr />
<div id="show"></div>
<script type="text/javascript" src="//cdnjscn.b0.upaiyun.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#format").click(function(){
            var styleConfig = {
                bookName: $("#bookName").val()||"",
                author: $("#author").val()||"font-size: 15px;",
                chapter: $("#chapter").val()||"margin-top:20px;",
                date: $("#date").val()||"",
                note: $("#note").val()||""
            };

            var $duokanNote = $("#duokanNote");
            var duokanNoteData = $.trim($duokanNote.val());
            var duokanNoteDataArr = duokanNoteData.split("<br>");
            var formattedData = [];
            //console.log(duokanNoteData);
            //console.log(duokanNoteDataArr);
            for (var i = 0; i < duokanNoteDataArr.length; i++) {
                var text = $.trim(duokanNoteDataArr[i]);
                if (text == "") {
                    continue;
                }
                if (i == 0) {
                    formattedData.push("<h1 class='bookName' style='" + styleConfig.bookName + "'>" + text + "</h1>");
                } else if (i == 2) {
                    formattedData.push("<span class='author' style='" + styleConfig.author + "'>(作者:" + text + ")</span>");
                } else {
                    var p = /([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))/i;

                    if (duokanNoteDataArr[i - 1] == "") {  //标题行
                        formattedData.push("<h2 class='chapter' style='" + styleConfig.chapter + "'>" + text + "</h2>");
                    } else if (p.test(text)) {//日期行
                        formattedData.push("<p class='date'><span style='" + styleConfig.date + "'>" + text + "</span></p>");
                    } else {
                        formattedData.push("<p class='note'><span style='" + styleConfig.note + "'>" + text + "</span></p>");
                    }
                }
            }
            $("#formatted").empty().text(formattedData.join(""));
            $("#show").empty().html(formattedData.join(""));
        });
    });
</script>
</body>
</html>